<template>
  <view class="details-top" :class="typeClass">
    <view class="details-title" v-if="title">
      {{ title }}
    </view>
    <view class="box centent">
      <view class="header-title min">
        {{ list.name }}&nbsp;&nbsp;&nbsp;
        <uni-tag
            class="details-tag"
            v-if="list.state"
            type="success"
            :text="list.state"
            inverted="false"
            size="small"
        ></uni-tag>
      </view>
      <view class="state">
        <view class="elasticity">
          <view class="">
            信用代码：
            <text>{{ list.stage }}</text>
          </view>
          <view class="btn" @click="copyText(list.stage)"> 复制</view>
        </view>
        <view class="elasticity">
          <view>
            联系电话：
            <text>{{ list.phone }}</text>
          </view>
        </view>
        <view class="elasticity"> 注册地址：{{ list.address }}</view>
        <slot></slot>
      </view>
    </view>
  </view>
</template>

<script setup>
import {defineProps} from "vue";

const proos = defineProps({
  list: {
    type: Object,
    default: new Object(),
  },
  title: {
    type: String,
    default: "",
  },
  typeClass: {
    type: String,
    default: "",
  },
});

function copyText(data) {
  uni.setClipboardData({
    data: data,
    success() {
      uni.showToast({
        title: "复制成功",
        icon: "success",
      });
    },
  });
}

</script>

<style lang="less" scoped>
@import "@/static/style/global.less";

.details-top {
  width: 100vw;
  min-height:430rpx;
  background: @mutual-img;
  background-size: 100% 100%;
  position: relative;
  margin-bottom: 350rpx;

  .details-title {
    width: 100%;
    text-align: center;
    font-size: @font-size-31;
    font-weight: 500;
    font-family: "ali-m";
    line-height: 90rpx;
    color: @color-font;
  }

  .details-tag {
    display: inherit;
  }

  .box {
    width: 92vw;
    bottom: -240rpx;
    background-color: @color-font;
    padding: 20rpx 20rpx;

    .tag-box {
      padding: 10rpx 0;
      border-bottom: 1rpx solid #f4f5fa;
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      color: #007aff;

      .tag-box-item {
        font-size: 24rpx;
        font-family: "ali";
        // border: 1rpx solid  #007aff;
        background-color: #F4F5FA;
        padding: 10rpx;
        margin: 5rpx;
      }

    }

    .state {
      margin: 20rpx 0;
      font-size: @font-size-23;
      color: @color-label;
      font-family: "ali";
      font-weight: 400;

      view {
        margin: 5rpx 0;

        &.elasticity {
          border-bottom: 1rpx solid #f7f8fd;
          height: 60rpx;
          display: flex;
          flex-flow: row nowrap;
          justify-content: space-between;
          align-items: center;

          .btn {
            width: 120rpx;
            height: 44rpx;
            background: @bg-color;
            text-align: center;
            line-height: 44rpx;
            margin-right: 20rpx;
          }
        }

        &.elasticity-box {
          margin-top: 15rpx;
          justify-content: flex-start;
          border-bottom: 0;

          .btn {
            width: 120rpx;
            height: 52rpx;
            background: @bg-color;
            text-align: center;
            line-height: 52rpx;
            margin-right: 20rpx;
            padding: 0 20rpx;
          }
        }
      }

      text {
        color: @color-blue;
        font-size: @font-size-23;
        font-family: "din";
      }
    }
  }

  &.none {
    z-index: 1001;
    background: none;
    margin-bottom: 50rpx;

    .box {
      bottom: 0;
    }
  }
}
</style>
